<template>
  <div class="top-bar">
    <div class="store-wrap">
      <h1>🛍️WEBSHOP</h1>
      <!-- 竖直分割线 -->
      <el-divider direction="vertical" style="height: 30px; border: 1px solid gray" />
      <!-- 商店头图 -->
      <img @dragstart.prevent class="store-img" :src="storeHeadshotUrl" />
      <!-- 商店名 -->
      <span class="store-name">
        <p style="margin-bottom: 10px;">{{ storeInfo.storeVo.storeName }}</p>
        <el-tag size="small" round>shop</el-tag>
      </span>
      <!-- 竖直分割线 -->
      <el-divider direction="vertical" style="height: 30px; border: 1px solid gray" />
    </div>
    <!-- 店内搜索 -->
    <div class="search">
      <el-input v-model="searchInput" placeholder="请输入店内搜索内容">
        <template #prepend>
          <el-select v-model="select" placeholder="选择" style="width: 100px">
            <el-option label="商品名称" value="1" />
            <el-option label="商品类别" value="2" />
          </el-select>
        </template>
        <template #append>
          <el-button icon="Search" />
        </template>
      </el-input>
    </div>
  </div>

  <div class="black-bar">
    <el-menu default-active="1" class="el-menu-demo" mode="horizontal" background-color="#292929" text-color="#fff"
      active-text-color="#CAE1E8">
      <el-menu-item index="1">
        <el-icon>
          <HomeFilled />
        </el-icon>
        商店首页
      </el-menu-item>
      <el-sub-menu index="2">
        <template #title>商品类别</template>
        <el-menu-item index="2-1">商品类别1</el-menu-item>
        <el-menu-item index="2-2">商品类别2</el-menu-item>
        <el-menu-item index="2-3">商品类别3</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="3">关于商店</el-menu-item>
      <el-menu-item index="4">更多</el-menu-item>
    </el-menu>
  </div>

  <!-- 轮播图 -->
  <div class="my_carousel">
    <el-carousel indicator-position="outside" height="600px">
      <el-carousel-item v-for="item in storeInfo.storeVo.pictures.slice(1).map(img_url_pre)" :key="item">
        <img :src="item" alt="carousel">
      </el-carousel-item>
    </el-carousel>
  </div>

  <!-- 活动 -->
  <div class="activity">

    <h2>
      商店活动
      <el-icon style="margin-left: 10px">
        <font-awesome-icon :icon="['fas', 'fire']" />
      </el-icon>
    </h2>

    <el-card class="activity-card">
      <div class="activity-card-body">
        <img src="../../assets/images/activity_2.png" alt="a-cart" style="height: 150px;" @dragstart.prevent />
        <div v-if="currentActivity.activity.activityId.length > 0">
          <span class="activity-name">
            🛍️ {{ currentActivity.activity.activityName }}
          </span>
          <span class="activity-info">
            惊喜特惠，全场满
            <span class="activity-number">{{ currentActivity.activity.reach }}</span>
            元，立减
            <span class="activity-number">{{ currentActivity.activity.reduce }}</span>
            元
          </span>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'fire']" />
            活动商品类别：
            <el-tag v-for="item in currentCategoryList">
              {{ item.categoryName }}
            </el-tag>
          </div>
          <div class="activity-time">
            <font-awesome-icon :icon="['fas', 'circle-info']" />
            活动时间：
            {{ currentActivity.activity.startTime }}
            -
            {{ currentActivity.activity.endTime }}
          </div>
        </div>
        <h1 v-else class="nothing">
          该商店暂无参与的活动
        </h1>
        <img src="../../assets/images/activity.png" alt="a-cart" style="height: 150px;" @dragstart.prevent>
      </div>
    </el-card>

  </div>


  <!-- 推荐商品 -->
  <div class="recommend">
    <h2>
      推荐商品
      <el-icon style="margin-left: 10px">
        <font-awesome-icon :icon="['fas', 'thumbs-up']" />
      </el-icon>
    </h2>

    <el-row :gutter="20">
      <el-col :span="9">
        <div class="left-card">
          <img v-if="commodityList.length != 0" class="l-img" :src="img_url_pre(commodityList[0].pictures[0])"
            @click="enterCommodity(commodityList[0].commodityId)" @dragstart.prevent>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="mid-card">
          <img v-if="commodityList.length > 1" class="m-img" :src="img_url_pre(commodityList[1].pictures[0])"
            @click="enterCommodity(commodityList[1].commodityId)" @dragstart.prevent>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="right-part">
          <div class="right-top">
            <img v-if="commodityList.length > 2" class="r-t-img" :src="img_url_pre(commodityList[2].pictures[0])"
              @click="enterCommodity(commodityList[2].commodityId)" @dragstart.prevent>
          </div>
          <div class="right-bottom">
            <img v-if="commodityList.length > 3" class="r-b-img" :src="img_url_pre(commodityList[3].pictures[0])"
              @click="enterCommodity(commodityList[3].commodityId)" @dragstart.prevent>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- 商品列表 -->
  <div class="commodity-list">
    <h2>
      商品列表
      <el-icon style="margin-left: 10px">
        <font-awesome-icon :icon="['fas', 'tags']" />
      </el-icon>
    </h2>
    <el-row :gutter="20">

      <!-- 加载骨架 -->
      <el-skeleton style="margin-top: 50px;" v-if="loading && commodityList.length === 0" :rows="5" animated />

      <h1 v-else-if="!loading && commodityList.length === 0" class="nothing">很抱歉，该商店暂无上架的商品😥</h1>

      <el-col v-for="item in commodityList" :key="item.commodityId" :span="8" style="margin-top: 20px;">

        <!-- 单个卡片 -->
        <el-card :body-style="{ display: 'flex', padding: '0px' }" shadow="hover">
          <img :src="img_url_pre(item.pictures[0])" class="image" @dragstart.prevent />
          <div class="left-part">
            <!-- 商品名 -->
            <div>
              {{ item.commodityName }}
            </div>
            <!-- 商品价格 -->
            <div class="price">
              <span style="font-size: 20px;">￥{{ item.price.toFixed(2) }}</span>
              <el-tag effect="dark" type="warning" size="small">包邮</el-tag>
            </div>
            <!-- 销量 -->
            <div class="sales-volume">
              {{ item.salesVolume }}+人已付款
            </div>
            <!-- 进入商店按钮 -->
            <el-button icon="Opportunity" link class="button" @click="enterCommodity(item.commodityId)">查看商品详情
            </el-button>
          </div>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import img_url_pre from '../../utils/img_url_filter'

const store = useStore();
const router = useRouter();
const { proxy } = getCurrentInstance();

const storeInfo = reactive({
  storeVo: {
    storeId: '',
    storeName: '',
    category: [],
    storeProfile: '',
    filingAddress: '',
    registeredCapital: 0,
    registrationDate: '',
    pictures: [],
    status: 1
  }
});

const currentCategoryList = ref([]);
const currentActivity = reactive({
  activity: {
    "activityId": "",
    "activityName": "",
    "startTime": "",
    "endTime": "",
    "categoryIdList": [],
    "fund": 0,
    "reach": 0,
    "reduce": 0,
    "balance": 0,
    "registeredCapital": 0,
    "monthlySalesVolume": 0,
    "monthlySalesValue": 0,
    "status": 0
  }
});

const commodityList = ref([]);
const searchInput = ref('');
const select = ref('')
const loading = ref(false);
const storeHeadshotUrl = ref('');

const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});

// 获取商店展示信息
const getStoreVo = async (storeId) => {
  let res = await proxy.$api.store.getStoreVo(storeId);
  storeInfo.storeVo = res.data;
  storeHeadshotUrl.value = img_url_pre(storeInfo.storeVo.pictures[0]);

  if (storeInfo.storeVo.activityId && storeInfo.storeVo.activityId.length > 0 && storeInfo.storeVo.activityId !== '0') {
    await getActivityInfo(storeInfo.storeVo.activityId);
  }
}

// 获取商店的商品列表
const getCommodityFromStore = async (storeId) => {
  let res = await proxy.$api.commodity.getCommodityFromStore(storeId, {
    current: config.current,
    size: config.size,
  });
  commodityList.value = res.data.commodityList;
  config.total = res.data.total;
}

// 查看商品详情
const enterCommodity = (commodityId) => {
  store.commit('commodity/updateCommodityId', commodityId);
  // 滚动到顶部
  if (store.state.MallMainScrollBarRef) {
    store.state.MallMainScrollBarRef.setScrollTop(0);
  }
  router.push('/mall/commodity')
}

/**
 * 获取活动详情
 */
const getActivityInfo = async (activityId) => {
  let ret = await proxy.$api.activity.getActivityInfo(activityId);
  currentActivity.activity = ret.data;
  await getCategories();
}

/**
 * 获取当前活动的所有商品类别
 */
const getCategories = async () => {
  for (let categoryId of currentActivity.activity.categoryIdList) {
    let ret = await proxy.$api.category.getCategory(categoryId);
    currentCategoryList.value.push(ret.data);
  }
}

onMounted(async () => {
  loading.value = true;
  await getStoreVo(store.state.store.storeId);
  await getCommodityFromStore(store.state.store.storeId)
  loading.value = false;
})
</script>

<style lang="less" scoped>
.top-bar {
  width: 100%;
  height: 80px;
  background-color: rgb(255, 255, 255);
  margin: 10px 0 17px 0;

  display: flex;
  justify-content: center;
  align-items: center;

  .store-wrap {
    display: flex;
    width: 50%;
    align-items: center;

    h1 {
      font-size: 28px;
      font-family: fantasy;
      margin-right: 20px;
    }

    .store-img {
      height: 60px;
      width: 60px;
      border-radius: 35px;
      margin-left: 10px;
    }

    .store-name {
      margin-left: 10px;
      margin-right: 20px;

      p {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .search {
    display: flex;
    margin-right: 20px;
  }
}

.black-bar {
  width: 100%;

  .el-menu {
    justify-content: center;
    height: 40px;
  }
}

.my_carousel {
  img {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
  }
}

.activity {
  margin-top: 60px;

  h2 {
    display: flex;
    justify-content: center;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 30px;
  }

  .activity-card {
    width: 69%;
    margin: 30px auto 0 auto;

    .activity-card-body {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;

      .nothing {
        font-size: 20px;
        margin: 30px auto 0 auto;
      }

      .activity-name {
        font-size: 30px;
      }

      .category {
        margin-top: 30px;

        .el-tag {
          margin-left: 5px;
        }
      }

      .activity-info {
        margin-left: 30px;

        .activity-number {
          font-size: 23px;
          color: #2e64c2;
        }
      }

      .activity-time {
        margin-top: 30px;
        font-size: 12px;
        color: #A2A2A2;
      }
    }
  }
}



.recommend {
  width: 73%;
  margin: 60px auto 70px auto;
  padding: 0 40px 0 40px;

  h2 {
    display: flex;
    justify-content: center;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 30px;
  }

  .el-row {

    .left-card {
      background-color: #d3dae33a;
      height: 420px;
      border-radius: 10px;

      .l-img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        cursor: pointer;
      }
    }

    .mid-card {
      background-color: #d3dae33a;
      height: 420px;
      border-radius: 10px;

      .m-img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        // transition: all 0.2s;
      }
    }

    .right-part {

      .right-top {
        background-color: #d3dae33a;
        height: 200px;
        border-radius: 10px;

        .r-t-img {
          border-radius: 10px;
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
          // transition: all 0.2s;
        }
      }

      .right-bottom {
        margin-top: 20px;
        background-color: #d3dae33a;
        height: 200px;
        border-radius: 10px;

        .r-b-img {
          border-radius: 10px;
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
          // transition: all 0.2s;
        }
      }
    }
  }
}

.commodity-list {
  width: 73%;
  margin: 0 auto 30px auto;
  padding: 0 40px 0 40px;

  h2 {
    display: flex;
    justify-content: center;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .el-row {

    .nothing {
      font-size: 20px;
      margin: 30px auto 0 auto;
    }

    .el-card:hover {
      /* hover的时候产生阴影和变大 */
      transform: scale(1.015);
      box-shadow: 0 0 16px rgba(113, 138, 187, 0.523);
      border-color: #eee;
    }

    .el-card {
      border: 0;
      border-radius: 15px;
      background-color: #d3dae33a;
      padding-right: 11px;

      .image {
        width: 43%;
        height: 150px;
        margin: 14px 14px 14px 14px;
        border-radius: 6px;
      }

      .left-part {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .price {
          display: flex;

          .el-tag {
            margin-left: 5px;
          }
        }

        .sales-volume {
          font-size: 13px;
          color: #A2A2A2;
          margin-left: 5px;
        }

        .button {
          display: flex;
          width: 100px;
        }
      }
    }
  }
}
</style>